<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--设置不同设备的字体大小一致-->
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <!--加入外部样式  -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--加入jquery的框架-->
    <script src="js/jquery-3.6.1.js"></script>
    <!--加入b3的脚本-->
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/stu.css">
</head>
<body>
<!--页头-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand" href="#">学生管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="https://jquery.cuishifeng.cn/">jQuery API中文文档 <span class="sr-only">(current)</span></a>
                </li>
                <li><a href="https://v3.bootcss.com">Bootstrap v3 中文文档</a></li>
                <li><a href="http://css.doyoe.com">CSS参考手册</a></li>
            </ul>

            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="啥也没有">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--中间内容-->
<div class="jumbotron my-jumbotron my-nav">
    <h1>欢迎您，</h1>
    <h1>&nbsp;&nbsp;&nbsp;来到学生管理系统!</h1>
</div>
<div class="container">
    <div class="panel panel-default ">
        <!-- Default panel contents -->
        <div class="panel-heading">学生信息显示</div>
        <div class="panel-body">
            <td>
                <button id="btnAdd" class="btn btn-primary">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;添加
                </button>&nbsp;
                <a id="btnAll" class="btn btn-primary glyphicon glyphicon-search" type="button">查询</a>
            </td>
        </div>

        <!-- Table -->
        <table class="table table-hover">
            <thead>
            <tr>
                <th>学号(Id)</th>
                <th>学生名字(Name)</th>
                <th>学生年龄(Age)</th>
                <th>学生性别(Sex)</th>
                <th>学生分数(Score)</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tableDate">
            <tr>
                <th scope="row">1</th>
                <td>ZS</td>
                <td>2001-01-01</td>
                <td>M</td>
                <td>90.0</td>
                <td>
                    <button class="btn btn-primary">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>&nbsp;删除
                    </button>&nbsp;
                    <button class="btn btn-primary">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--脚注-->
<footer class="bs-docs-footer">
    <div class="container">
        <ul class="bs-docs-footer-links ">
            <li><a href="#">GitHub</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">实例</a></li>
            <li><a href="#">关于</a></li>
        </ul>

        <p>Designed and built with all the love in the world by @mdo and @fat. Maintained by the core team with the help
            of our contributors.</p>

        <p>Code licensed , CC BY 3.0.</p>

    </div>
</footer>
</body>
</html>
<script>

    //异步请求机制(Asynchronous JavaScript and XML)ajax
    //XMLHttpRequest对象完成异步请求
    //由于浏览器不同，并且存在引擎竞争，前端的JavaScript原生态脚本都都不一样(不兼容)
    //jQuery，给出了一个统一的方法，实现了不同浏览器兼容(少写多做)
    //把一切JavaScript对象变成jQuery对象，并且使用jQuery方法
    //使用${控制器}直接变成jQuery对象
    //var btnAll=document.getElementById("btnAll");

    // $("#btnAll").click(function (){
    //     //window.alert("好好");
    //     window.text()
    // });
    // $("#btnAdd").click(function (){
    //     window.alert("好好");
    // });
    //使用jQuery请求后端

    $("#btnAll").click(function () {
        $.ajax({
            url: "/stu/getAll.action",
            //默认是get请求
            type: "get",
            //后端返回数据的格式JSON
            dataType: "json",
            //请求之前做的事情
            beforeSend: function (XMLHttpRequest) {
                console.log("请求之前做的事情......")
            },
            //请求成功返回这里
            success: function (date, textStatus, jqXHR) {
                console.log("请求成功............");
                //删除tableDate的内容
                $("#tableDate").empty();
                //准备收获
                $.each(date,function (i,n) {
                    $("#tableDate").append('<tr>\n' +
                        '                 <th scope="row">'+n.id+'</th>\n' +
                        '                <td>'+n.name+'</td>\n' +
                        '                <td>'+n.age+'</td>\n' +
                        '                <td>'+n.sex+'</td>\n' +
                        '                <td>'+n.score+'</td>\n' +
                        '                <td>\n' +
                        '                    <button class="btn btn-primary">\n' +
                        '                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>&nbsp;删除\n' +
                        '                    </button>&nbsp;\n' +
                        '                    <button class="btn btn-primary">\n' +
                        '                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改\n' +
                        '                    </button>\n' +
                        '                </td>\n' +
                        '            </tr>');
                })
            },
            //请求失败返回这里
            error: function(XMLHttpRequest, textStatus, errorThrown){
            console.log("请求错误............")
        },
        //请求完毕后调用
        complete: function(XMLHttpRequest,textStatus) {
            console.log("请求完毕后调用.......")
        },
    });
    })
</script>